<template>
  <div>
    <slot name="left"></slot>
    <span :id="eleId"></span>
    <slot name="right"></slot>
    <span>测试子组件是否跟随父组件值变化： {{ endVal }}</span>
  </div>
</template>

<script>
import CountUp from 'countup'
export default {
  // 数字渐变组件
  name: 'CountTo',
  data () {
    return {
      counter: {}
    }
  },
  methods: {
    getCount () {
      console.log(this.endVal)
    }
  },
  watch: {
    endVal (newVal) {
      console.log(newVal, '阿西吧')
      this.endVal = newVal
      this.counter.update(newVal) // 监听值发生改变时更新
    }
  },
  components: {},

  computed: {
    eleId () {
      // 每一个组件都有一个this._uid,其各不相同
      return `count_up_${this._uid}`
    }
  },
  props: {
    /**
     * @description 渐变动画起始值(可不填)
     */
    startVal: {
      type: Number,
      default: 0
    },
    /**
     * @description 动画延迟开始时间
     */
    delay: {
      type: Number,
      default: 0
    },
    /**
     * @description 最终值，必填
     */
    endVal: {
      type: Number,
      required: true
    },
    /**
     * @description 小数点后保留几位小数
     */
    decimals: {
      type: Number,
      default: 0
    },
    /**
     * @description 动画渐变时间--单位:秒
     */
    duration: {
      type: Number,
      default: 1
    },
    /**
     * @description 是否使用变速效果
     */
    useEasing: {
      type: Boolean,
      default: false
    },
    /**
     * @description 是否使用分组隔离(数字太大或有小数有逗号分组隔离效果)
     */
    useGrouping: {
      type: Boolean,
      default: true
    },
    /**
     * @description 用什么符号来隔离整数
     */
    separator: {
      type: String,
      default: ','
    },
    /**
     * @description 用什么符号来隔离小数
     */
    decimal: {
      type: String,
      default: '.'
    }
  },
  mounted () {
    // 传入一个回调函数，当页面的所有dom渲染完之后调用
    this.$nextTick(() => {
      this.counter = new CountUp(
        this.eleId,
        this.startVal,
        this.endVal,
        this.decimals,
        this.duration,
        {
          useEasing: this.useEasing,
          useGrouping: this.useGrouping,
          separator: this.separator,
          decimal: this.decimal
        }
      )
      // 动画延迟开始时间
      setTimeout(() => {
        this.counter.start()
      }, this.delay)
    })
  }
}
</script>
<style lang='less' scoped>
</style>
